<template>
    <div>
        <van-nav-bar title="登录" />
        <van-form ref="loginForm" @submit="login">
            <van-field
                placeholder="请输入手机号"
                v-model="user.mobile"
                :rules="formRules.mobile"
                name="mobile"
            >
                <!-- ref 的挂载，就是想要拿到其内部的name，这个name是要交给内部的input使用的，所以可以拿到其中的input -->
                <template v-slot:left-icon>
                    <i class="toutiao toutiao-shouji"></i>
                </template>
            </van-field>
            <van-field
                placeholder="请输入验证码"
                v-model="user.code"
                :rules="formRules.code"
            >
                <template v-slot:left-icon>
                    <i class="toutiao toutiao-yanzhengma"></i>
                </template>
                <template #button>
                    <!-- native-type="button" 更改vant2里的button属性，阻止其自动默认提交 -->
                    <van-button
                        size="small"
                        type="primary"
                        native-type="button"
                        @click="sendCode"
                        v-if="cflag"
                        >发送验证码</van-button
                    >
                    <van-count-down
                        :time="time"
                        @finish="cflag = true"
                        v-else
                        millisecond
                        format="重新发送剩余 SS 秒"
                    />
                </template>
            </van-field>
            <div class="sub-btn">
                <van-button
                    native-type="submit"
                    block
                    type="info"
                    :loading="loading"
                    >提交</van-button
                >
            </div>
        </van-form>
    </div>
</template>
<script>
import { fasong as sendSms, denglu as log } from "@/api/user";
export default {
    data() {
        return {
            user: {
                mobile: "",
                code: "246810",
            },
            // 规则校验
            formRules: {
                mobile: [
                    { required: true, message: "手机号码不能为空" }, // 必填
                    { pattern: /^1\d{10}$/, message: "手机号码不正确" },
                ],
                code: [
                    { required: true, message: "验证码不能为空" },
                    { pattern: /^\d{4,6}$/, message: "验证码为4-6位数字" },
                ],
            },
            time: 1000,
            cflag: true,
            token: "",
            loading: false,
        };
    },
    methods: {
        async sendCode() {
            await this.$refs.loginForm.validate("mobile"); // loginForm 得到 form 组件，这个组件上存在validate这个函数，此参数返回一个promise
            // $refs可以调用组件上的函数,因为 $refs 拿到的组件是一个js对象
            console.log("验证成功"); // 上面是一个promise，如果报错，后续代码都不会再执行

            // 发送短信验证码
            // 如果前面的promise通过了，就能执行接下来的业务代码
            await sendSms(this.user.mobile); // 这个promise还是能得到拦截器的错误对象的，毕竟响应拦截器还是返回了一个一定错误promise
            

            // 得到验证码
            this.$toast.success("短信验证码发送成功");
            // 开启计时
            this.cflag = false;

        },
        // 登录
        async login() {
            this.loading = true;
            try {
                let res = await log(this.user);
                // 存入 localStorage
                this.$store.commit("setUser",res.data)
                this.$toast.success("登录成功")
                this.$router.push("/my")
            } finally {
                this.loading = false;
            }
        },
    },
};
</script>
<style lang="less" scoped>
.sub-btn {
    margin: 16px;
}
</style>